<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>{{ 'addon.mod_quiz.quiznavigation' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="addon-mod_quiz-navigation-modal">
    <nav>
        <ion-list>
            <ion-item button class="ion-text-wrap {{question.stateClass}}" *ngFor="let question of navigation"
                [attr.aria-current]="!summaryShown && currentPage === question.page ? 'page' : 'false'"
                [disabled]="!isReview && isSequential && currentPage !== question.page" (click)="loadPage(question.page, question.slot)"
                [detail]="false">

                <ion-label class="ion-text-wrap">
                    <p class="item-heading" *ngIf="question.type !== 'description' && question.questionnumber">
                        {{ 'core.question.questionno' | translate:{$a: question.questionnumber} }}
                    </p>
                    <p class="item-heading" *ngIf="question.type === 'description' || !question.questionnumber">
                        {{ 'core.question.information' | translate }}
                    </p>
                    <p>{{ question.status }}</p>
                </ion-label>

                <ion-icon *ngIf="question.type === 'description' || !question.questionnumber" name="fas-circle-info" slot="end"
                    aria-hidden="true" />
                <ion-icon *ngIf="question.stateclass === 'requiresgrading'" name="fas-circle-question" aria-hidden="true" slot="end" />
                <ion-icon *ngIf="question.stateclass === 'correct'" [name]="correctIcon" color="success" aria-hidden="true" slot="end" />
                <ion-icon *ngIf="question.stateclass === 'partiallycorrect'" [name]="partialCorrectIcon" color="warning" aria-hidden="true"
                    slot="end" />
                <ion-icon *ngIf="question.stateclass === 'incorrect' || question.stateclass === 'notanswered'" [name]="incorrectIcon"
                    color="danger" aria-hidden="true" slot="end" />
                <ion-icon *ngIf="question.stateclass === 'invalidanswer'" name="fas-triangle-exclamation" color="danger" aria-hidden="true"
                    slot="end" />
            </ion-item>
        </ion-list>
    </nav>
</ion-content>
<ion-footer *ngIf="!isReview">
    <!-- In player, show button to finish attempt. -->
    <ion-button class="ion-text-wrap ion-margin" expand="block" (click)="loadPage(-1)" [disabled]="isSequential && nextPage !== -1">
        {{ 'addon.mod_quiz.finishattemptdots' | translate }}
    </ion-button>
</ion-footer>
